<template>
<div class="main">
	<van-nav-bar title="用户登录"/>

	<van-row type="flex" justify="center" class="loginImg">
		<van-col span="1"> </van-col>
		<van-col span="22"><img src="../../assets/images/login.png" /></van-col>
		<van-col span="1"> </van-col>
	</van-row>


	<van-row type="flex" justify="center" class="line">
		<van-col span="3"> </van-col>
		<van-col span="18">
			<van-cell-group>
				<van-field placeholder="请输入用户名" type="text" v-model="userInfo.username" left-icon="manager"/>
			</van-cell-group>
			<van-cell-group>
				<van-field placeholder="请输入密码"  type="password"  v-model="userInfo.password" left-icon="lock"/>
			</van-cell-group>
		</van-col>
		<van-col span="3"> </van-col>
	</van-row>


	<van-row type="flex" justify="center" class="btns">
		<van-col span="3"> </van-col>
		<van-col span="18">
			<van-button class="jumpBtn" type="primary" @click="handleClick" size="large">登录</van-button>
		</van-col>
		<van-col span="3"> </van-col>
	</van-row>
</div>
</template>

<script type="text/ecmascript-6">
import { mapGetters, mapActions, state } from "vuex";
import store from "vuex";
import {login} from "@/api/user";
import {Toast} from 'vant'
export default {
  name: 'login',
  components: {
  },
  data () {
    return {
      userInfo: {}
    }
  },
  // 创建完毕状态(里面是操作)
  created () {
    },
  computed:{
   ...mapGetters(["username", "password"])
  },
  methods: {
	...mapActions("user", ["SetUserInfo"]),
  handleClick(){
    console.log(store, 'state')
      this.SetUserInfo({})
      // 测试通道，不为空直接登录
          login().then(res => {
            this.SetUserInfo({...this.userInfo});
              setTimeout(() => {
                this.logining = false
                Toast('登录成功')
                this.$router.push('/home');
              }, 1000)
           })
          this.SetUserInfo({...this.userInfo})
          setTimeout(() => {
            this.logining = false
            this.$router.push('/home')
            Toast('登录成功')
          }, 1000)
    },
  }
}
</script>

<style scoped>
 :deep(.van-nav-bar) {
    background: #1989fa;
  }
 :deep(.van-nav-bar__title) {
    color: #fff;
  }
  :deep(.van-nav-bar .van-icon) {
    color: #fff;
  }
.loginImg {
  margin-top: 150px;
}
.loginImg .van-col {
  text-align: center;
}
.loginImg img {
  width: 100px;
  height: 100px;
  margin-bottom: 30px;
}
.van-cell-group {
  margin-bottom: 20px;
}
</style>
